<template>
	<view class="content">
		<u-sticky bgColor="#f0f0f0">
			<view class="" style="padding: 20rpx 20rpx 0 20rpx;">
				<u-search placeholder="请输入关键词" v-model="keyword" bgColor="#fff" :showAction="false" :disabled="true"
					height="30" @click="gotoSearchPage()"></u-search>
			</view>
		</u-sticky>
		<view class="" style="margin: 10rpx 20rpx;">
			<u-swiper height="176" :list="swiperList" keyName="url" @click="swiperClick"></u-swiper>
		</view>
		<u-sticky bgColor="#f0f0f0" :offsetTop="42">
			<u-tabs :list="tabsList" :activeStyle="{color:'#3c9cff', fontWeight:'bold',transform: 'scale(1.25)'}"
				:inactiveStyle="{color: '#000',transform: 'scale(1.05)'}" @change="tabsChange"></u-tabs>
		</u-sticky>
		<view class="tabBoxs">
			<view class="tabBoxsList" v-for="tarbox in BoxList" @click.stop="gotoSearchPage(tarbox)">
				<text class="tabBoxsListTxt">{{tarbox}}</text>
			</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class=""
				style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 12rpx;">
				<view v-for="data in cashInfoList" style="margin-bottom: 16rpx;" @click="cashDetail(data._id)">
					<cashList :cashInfo="data" v-if="cashInfoList.length">
					</cashList>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import cashList from "@/components/cashList/cashList.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		store,
		mutations
	} from "../../uni_modules/uni-id-pages/common/store";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabsList: [],
				BoxList: [
					"最近上线",
					"近期热门",
					"强力推荐"
				],
				swiperList: [],
				cashInfoList: [],
				tabsIndex: 0,
				initOr: false
			}
		},
		components: {
			"cash-list": cashList
		},
		created() {
			uni.setNavigationBarColor({
				backgroundColor: "#f0f0f0",
				frontColor: "#000000"
			})
		},
		async onLoad() {
			mutations.updateUserInfo()
			// 获取上次打开小程序的时间，计算是否超过一天，
			let addIntegral = new Date().getTime() - store.userInfo.signInTime
			if (addIntegral > 86400000) {
				uni.showToast({
					title: "签到成功，积分+1",
					icon: "success",
					success: async (res) => {
						console.log(res);
						await uniCloud.callFunction({
							name: "updateInfo",
							data: {
								signInTime: new Date().getTime(),
								integral: 1,
								userID: store.userInfo._id
							}
						})
						mutations.updateUserInfo()
					}
				})
			}
		},
		methods: {
			async init() {
				return new Promise(async (resolve2) => {
					let p1 = new Promise((resolve, rej) => {
						uniCloud.callFunction({
							name: "getLunbotu",
						}).then(res => {
							let swiperList = res?.result?.data ?? []
							swiperList.forEach(item => {
								this.swiperList.push({
									url: item.Imagefile.url,
									open_url: item.open_url
								})
							})
							return resolve()
						})
					})
					let p2 = new Promise((resolve) => {
						uniCloud.callFunction({
							name: "getTabs"
						}).then(res => {
							this.tabsList = res?.result?.data ?? []
							return resolve()
						})
					})
					await Promise.all([p1, p2])
					resolve2()
				})

			},
			/*上拉加载的回调*/
			async upCallback(page) {
				// console.log(page);
				if (!this.initOr) {
					await this.init()
					this.initOr = true
					this.mescroll.resetUpScroll()
					return
				} /* 获取数据*/
				let list = await this.getCashInfo(page.num, page.size)
				if (page.num === 1) this.cashInfoList = []
				this.cashInfoList = [...this.cashInfoList, ...list]
				this.mescroll.endSuccess(list.length);
			},
			async getCashInfo(num, size) {
				return new Promise((resolve) => {
					uniCloud.callFunction({
						name: "getCashInfo",
						data: {
							category_id: this.tabsList[this.tabsIndex]._id,
							num,
							size
						}
					}).then(res => {
						resolve(res?.result?.data || [])
					})
				})
			},
			tabsChange(e) {
				this.tabsIndex = e.index
				this.cashInfoList = []
				this.mescroll.scrollTo()
				this.mescroll.resetUpScroll()
			},
			gotoSearchPage(e) {
				let url = e ? "/pages/search/search?keyWord=" + e : "/pages/search/search"
				uni.navigateTo({
					url,
				})
			},
			cashDetail(event) {
				console.log("点击案例跳转详情页", event);
				uni.navigateTo({
					url: "/pages/cashRead/cashRead?cash_id=" + event
				})
			},
			swiperClick(e) {
				console.log("点击了轮播图", e);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: #f0f0f0;

		.tabBoxs {
			display: flex;

			.tabBoxsList {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 14rpx;
				height: 60rpx;
				width: 218rpx;
				border: 1rpx solid white;
				border-radius: 50rpx;
				background-color: white;

				.tabBoxsListTxt {
					color: #707070;
					font-size: 28rpx;
				}
			}
		}
	}
</style>